<form class="wrapper" nz-form [formGroup]="form">
    <div class="head">
        <div nz-row>
            <div nz-col nzSpan="23">
                <nz-form-item nzFlex>
                    <nz-form-label nzRequired nzFor="routeName" style="width: 115px;">路由名称</nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <input nz-input placeholder="" formControlName="routeName" id="routeName"
                               maxlength="100"/>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="23">
                <nz-form-item nzFlex>
                    <nz-form-label nzFor="methods" style="width: 115px;">
                        <label
                            nz-checkbox
                            [(ngModel)]="allChecked"
                            (ngModelChange)="updateAllChecked()"
                            [nzIndeterminate]="indeterminate"
                            [ngModelOptions]="{standalone: true}"
                        >
                            请求方式
                        </label>
                    </nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <nz-checkbox-group formControlName="methods" (ngModelChange)="updateSingleChecked()"></nz-checkbox-group>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="23">
                <nz-form-item nzFlex>
                    <nz-form-label style="width: 115px;">匹配路径</nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <ng-container *ngFor="let item of hostsArray; let i = index">
                            <nz-input-group nzAddOnBefore="http(https)://" nzSearch [nzAddOnAfter]="suffixIconButton1">
                                <input nz-input [placeholder]="i === hostsArray.length-1 ? '可为空': ''" [(ngModel)]="hostsValues[i]" maxlength="100" [ngModelOptions]="{standalone: true}"/>
                            </nz-input-group>
                            <ng-template #suffixIconButton1>
                            <span nzSearch>
                                <button *ngIf="hostsArray.length !== 1" nz-button nzType="danger" nz-tooltip nzTitle="删除"
                                        [ngStyle]="{'margin-right': i!==hostsArray.length-1?'0px':'6px'}" (click)="deleteControlArray(i, hostsArray, hostsValues)">
                                    <i nz-icon type="delete"></i></button>
                                <button *ngIf="i === hostsArray.length-1" nz-button nzType="dashed" nz-tooltip nzTitle="添加" (click)="addControlArray(i, hostsArray, hostsValues)">
                                    <i nz-icon type="plus"></i></button>
                            </span>
                            </ng-template>
                        </ng-container>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="23">
                <nz-form-item nzFlex>
                    <nz-form-label style="width: 115px;">匹配地址</nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <ng-container *ngFor="let item of pathsArray; let i = index">
                            <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton2">
                                <input nz-input [placeholder]="i === pathsArray.length-1 ? '可为空': ''" [(ngModel)]="pathsValues[i]" maxlength="100" [ngModelOptions]="{standalone: true}"/>
                            </nz-input-group>
                            <ng-template #suffixIconButton2>
                            <span nzSearch>
                                <button *ngIf="pathsArray.length !== 1" nz-button nzType="danger" nz-tooltip nzTitle="删除"
                                        [ngStyle]="{'margin-right': i!==pathsArray.length-1?'0px':'6px'}" (click)="deleteControlArray(i, pathsArray, pathsValues)">
                                    <i nz-icon type="delete"></i></button>
                                <button *ngIf="i === pathsArray.length-1" nz-button nzType="dashed" nz-tooltip nzTitle="添加" (click)="addControlArray(i, pathsArray, pathsValues)">
                                    <i nz-icon type="plus"></i></button>
                            </span>
                            </ng-template>
                        </ng-container>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="23">
                <nz-form-item nzFlex>
                    <nz-form-label nzFor="host" style="width: 115px;">后端地址</nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <nz-select formControlName="host"
                                   nzAllowClear
                                   nzShowSearch>
                            <nz-option nzCustomContent *ngFor="let item of clusterList" [nzValue]="item.value"
                                       [nzLabel]="item.label">
                                <div class="clearFix">
                                    <span style="float: left">{{item.label}}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{item.targetsMemo}}</span>
                                </div>
                            </nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="11">
                <nz-form-item nzFlex>
                    <nz-form-label nzFor="connectTimeout" style="width: 130px;">连接超时</nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <nz-input-group nzAddOnAfter="毫秒">
                            <input nz-input placeholder="" appNumberOnly [scale]="0" formControlName="connectTimeout"
                                   id="connectTimeout" maxlength="100"/>
                        </nz-input-group>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col nzSpan="11" nzOffset="1">
                <nz-form-item nzFlex>
                    <nz-form-label nzFor="writeTimeout" style="width: 115px;">发送超时</nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <nz-input-group nzAddOnAfter="毫秒">
                            <input nz-input placeholder="" appNumberOnly [scale]="0" formControlName="writeTimeout"
                                   id="writeTimeout" maxlength="100"/>
                        </nz-input-group>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="11">
                <nz-form-item nzFlex>
                    <nz-form-label nzFor="readTimeout" style="width: 130px;">读取超时</nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <nz-input-group nzAddOnAfter="毫秒">
                            <input nz-input placeholder="" appNumberOnly [scale]="0" formControlName="readTimeout"
                                   id="readTimeout" maxlength="100"/>
                        </nz-input-group>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col nzSpan="5" nzOffset="2">
                <nz-form-item nzFlex>
                    <nz-form-label nzFor="onlyHttps" style="width: 138px;">仅https</nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <nz-switch formControlName="onlyHttps" id="onlyHttps" nzCheckedChildren="开" nzUnCheckedChildren="关"></nz-switch>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col nzSpan="5">
                <nz-form-item nzFlex>
                    <nz-form-label nzFor="stripPath" style="width: 138px;">舍弃URI</nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <nz-switch formControlName="stripPath" id="stripPath" nzCheckedChildren="开" nzUnCheckedChildren="关"></nz-switch>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
    </div>
    <nz-card [nzBordered]="false" [nzSize]="'small'" nzTitle="路由插件" [nzExtra]="extraTemplate">
        <ng-template #extraTemplate>
            <button nz-button nzType="primary" nzShape="circle" nz-tooltip nzTitle="添加" (click)="openPluginsWin(null)">
                <i nz-icon nzType="file-add"></i>
            </button>&nbsp;
        </ng-template>
        <div class="content">
            <div class="tabset-wrapper">
                <nz-table #pT1 nzBordered
                          [nzData]="pluginsList"
                          [nzSize]="'small'"
                          [nzFrontPagination]="false"
                          [nzShowPagination]="false">
                    <thead>
                    <tr>
                        <th nzWidth="120px">插件名称</th>
                        <th nzWidth="100px">是否启用</th>
                        <th nzWidth="150px">创建时间</th>
                        <th nzWidth="100px" nzAlign="center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let item of pT1.data; let i = index">
                        <td>{{ item?.name }}</td>
                        <td>{{ item?.enabled }}</td>
                        <td>{{ item?.createdAt }}</td>
                        <td nzAlign="center">
                            <button nz-button nzType="primary">
                                <i nz-icon nzType="form"></i>
                            </button>&nbsp;
                            <button nz-button nzType="danger" nz-popconfirm nzTitle="您确认要删除【{{item?.name}}】吗?"
                                    (nzOnConfirm)="deletePlug(item)">
                                <i nz-icon nzType="delete"></i>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
    </nz-card>
</form>
